<!-- 内部法人管理里 -> 导入 -->
<template>
    <div>
        <el-breadcrumb separator="/" class="bread-title">
            <el-breadcrumb-item :to="{ path: '/intLegalPersonManage' }">内部法人管理</el-breadcrumb-item>
            <el-breadcrumb-item>导入</el-breadcrumb-item>
        </el-breadcrumb>
        <upload-excel :fileSize='5120' :fileType="fileType" @uploadSuccess='uploadSuccess' apiPath="PUSHINITCOMPANY" ></upload-excel>
        <div class='link'>提示：批量导入前请先<a :href="dowloadPath" @click="dowload">下载《内部法人信息表》导入模板</a>,并按照模板格式要求录入数据。</div>
        <div class="succ-info" v-show="successNum">已成功导入{{successNum}}条记录</div>
       
       <div v-show='tableData.length'>
           <div class="error-info">错误记录（{{tableData.length}}）</div>
           <table-list
            :tableData='tableData'
            :tableLabels='tableLabels'
            :tableProps='tableProps'
            :tableChangeBtns='tableChangeBtns'
            >
            </table-list>
       </div>
        <c-modal :editform="updateForm" :visible.sync='visible' @onSave='updateTables'></c-modal>
    </div>
</template>
<script>
import api from '@/api/apiPath'
import tableList from '../common/tableList'
import uoloadExcel from '../common/uploadExcel'
import legalPersonModal from '../common/legalPersonModal'
export default {
	components: {
        'table-list':tableList,
        'upload-excel':uoloadExcel,
        'c-modal':legalPersonModal
        },
	data () {
		return {
            tableProps:['companyName','companyRepresentative','companyTaxpayer','companyProvince','companyCity' ,'companyCounty','companyAddress','companyPostalcode' ,'companyPhone' ,'companyRemark','errorMsg','changeBtn'],
            tableLabels:['公司名称'    ,'法定代表人'            ,'纳税人识别号'     ,'公司所在省'       ,'公司所在市'   ,'公司所在区'     ,'公司地址'        ,'邮政编码'           ,'联系电话'      ,'备注'          ,'错误原因' ,'操作'],
            tableChangeBtns:[   
                {label:"编辑",type:'edit',fn:this.changeList},
                {label:"删除",type:'dele',fn:this.deleteItem}
            ],
            tableData:[],
            updateForm:"",//当前需要编辑的表单
            visible:false,
            editIdx:'',
            fileType :['xls','xlsx'],
            successNum:0,
            dowloadPath:api.INITeXCELFILE
        }
    },
    methods:{
        //删除
        deleteItem(type,idx){
            this.$confirm(`确定要删除这条数据吗？`, '', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                this.tableData.splice(idx,1)
                this.$message({
                    type: 'sunccess',
                    message: '已删除',
                });
            }).catch(() => {
                
            });
        },
        //上传成功
        uploadSuccess(errorInfo){
            this.successNum = errorInfo['200'];
            this.tableData = errorInfo['201->']; 
        },
        dowload(){
            this.$message({
                type: 'success',
                message: '文件已开始下载',
            });
        },
       //新增编辑开户行信息
        changeList(type,idx){
            //记录当前需要编辑的数据
            this.updateForm = JSON.parse(JSON.stringify(this.tableData[idx]));
            this.visible = true;
            //当前编辑数据下标
            this.editIdx = idx;
            
        },
        //编辑保存
        updateTables(form){
            //更新当前行更改信息
            this.$set(this.tableData, this.editIdx, form)
            //修改完成再次导入
            this.axios.post(`${api.EDITPUSHINITCOMPANY}`,form).then(res => {
                let info = res.data;
                if (info.code == 200) {
                    if(info.data){
                        this.tableData.splice(this.editIdx,1);
                        this.$message({
                            type: 'success',
                            message: '保存成功',
                        });
                    }else{
                        this.tableData[this.editIdx].errorMsg = info.msg;
                        this.$message.error(info.msg)
                    }
                    
                }
            }).catch(err=>{
                console.log(err)
            })
        },
  
    
	},
	created () {
        
    },
    computed:{
      
    },
	destroyed() {
		
	},
	filters: {
 
	}
}

</script>

<style lang="stylus" scoped>
.link{
    padding:20px 0;
    line-height:16px;
}
.link>a{
    color: #409eff;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: relative;
    text-decoration: none;
    outline: none;
    cursor: pointer;
    padding: 0;
    font-weight: 500;
}
.succ-info{
    color: #67c23a;
    padding:20px 0;
}
.error-info{
        color: #f56c6c;
        font-size :14px;
         padding-bottom :10px;
}
</style>
